<!DOCTYPE html><html><head>
      <title>css&#x5E38;&#x7528;&#x77E5;&#x8BC6;</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Administrator\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.2\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h2 class="mume-header" id="css%E7%9A%84%E5%B8%B8%E7%94%A8%E7%9F%A5%E8%AF%86">CSS&#x7684;&#x5E38;&#x7528;&#x77E5;&#x8BC6;</h2>

<h4 class="mume-header" id="%E4%B8%80-%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F">&#x4E00;&#x3001;&#x5E38;&#x7528;&#x7684;&#x6587;&#x672C;&#x6837;&#x5F0F;</h4>

<p>&#x6240;&#x6709;&#x7684;&#x6837;&#x5F0F;&#x5982;&#x4EE3;&#x7801;&#x6CE8;&#x91CA;&#x6240;&#x793A;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode color">#009</span><span class="token punctuation">;</span> <span class="token comment">/*color&#x8868;&#x793A;&#x7684;&#x662F;&#x989C;&#x8272;*/</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">15</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token comment">/*&#x5B57;&#x4F53;&#x5927;&#x5C0F;*/</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span><span class="token comment">/*&#x5B57;&#x4F53;&#x7684;&#x7C97;&#x7EC6;*/</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> &#x9ED1;&#x4F53;<span class="token punctuation">;</span><span class="token comment">/*&#x7F51;&#x9875;&#x4E2D;&#x7684;&#x5B57;&#x4F53;&#x90FD;&#x4F7F;&#x7528;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&#xFF08;&#x9ED8;&#x8BA4;&#xFF09;*/</span>
    <span class="token comment">/*
    &#x8868;&#x793A;&#x6587;&#x672C;&#x7684;&#x6837;&#x5F0F;:underline--&gt;&#x4E0B;&#x5212;&#x7EBF;
                  none--&gt;&#x8868;&#x793A;&#x4EC0;&#x4E48;&#x90FD;&#x6CA1;&#x6709;
                  line-through--&gt;&#x4E2D;&#x6ED1;&#x7EBF;
    */</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
    <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token comment">/*&#x5B57;&#x4F53;&#x8BBE;&#x7F6E;&#x4E3A;&#x659C;&#x4F53;*/</span>
    
  <span class="token punctuation">}</span>
<span class="token selector">p</span><span class="token punctuation">{</span>
  <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token number">33</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token comment">/*&#x6BB5;&#x843D;&#x7F29;&#x8FDB;&#xFF0C;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x6539;&#x53D8;&#x4F1A;&#x6709;&#x5F71;&#x54CD;*/</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">15</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">25</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token comment">/*&#x884C;&#x95F4;&#x8DDD;*/</span>
  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token comment">/*&#x5B57;&#x7B26;&#x95F4;&#x8DDD;*/</span>
<span class="token punctuation">}</span>
</pre><h4 class="mume-header" id="%E4%BA%8C-%E5%AE%B9%E5%99%A8%E6%A0%B7%E5%BC%8F">&#x4E8C;&#x3001;&#x5BB9;&#x5668;&#x6837;&#x5F0F;</h4>

<p>&#x5BB9;&#x5668;&#x6837;&#x5F0F;&#x4E00;&#x822C;&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x5BBD;&#x548C;&#x9AD8;&#xFF0C;&#x8FB9;&#x6846;&#x548C;&#x80CC;&#x666F;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*border&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x8FB9;&#x6846;&#xFF0C;&#x9700;&#x8981;&#x5199;&#x4E09;&#x4E2A;&#x503C;&#xFF0C;&#x7B2C;&#x4E00;&#x4E2A;&#x662F;&#x7C97;&#x7EC6;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x662F;&#x7C7B;&#x578B;(solid,dotted,dashed)&#xFF0C;&#x7B2C;&#x4E09;&#x4E2A;&#x662F;&#x989C;&#x8272;*/</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#333</span><span class="token punctuation">;</span>
  <span class="token comment">/* border-top:none;
  border:none;
  border-bottom: 1px dashed #888; */</span>

  <span class="token comment">/*width&#x8868;&#x793A;&#x5BBD;&#xFF0C;height&#x8868;&#x793A;&#x9AD8;*/</span>
  <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">p</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">800</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">800</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
  <span class="token comment">/*background: #aaa;*/</span><span class="token comment">/*&#x76F4;&#x63A5;&#x52A0;&#x989C;&#x8272;*/</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#aaa</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>Saw.png<span class="token punctuation">)</span></span> no-repeat<span class="token punctuation">;</span> <span class="token comment">/*&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x52A0;&#x989C;&#x8272;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x5199;&#x56FE;&#x7247;*/</span>
  <span class="token comment">/*background-position: center;*/</span> <span class="token comment">/*center&#x8868;&#x793A;&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;&#x90FD;&#x5C45;&#x4E2D;*/</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span> <span class="token comment">/*&#x5DE6;&#x53F3;20%&#xFF0C;&#x4E0A;&#x4E0B;50%*/</span>
<span class="token punctuation">}</span>
</pre><h4 class="mume-header" id="%E4%B8%89-%E9%80%89%E6%8B%A9%E5%99%A8">&#x4E09;&#x3001;&#x9009;&#x62E9;&#x5668;</h4>

<p>css&#x901A;&#x8FC7;&#x9009;&#x62E9;&#x5668;&#x6765;&#x4E3A;&#x4E0D;&#x540C;&#x7684;&#x5BB9;&#x5668;&#x7F16;&#x5199;&#x6837;&#x5F0F;</p>
<ul>
<li>&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;<br>
&#x6240;&#x6709;&#x7684;&#x6807;&#x7B7E;&#x90FD;&#x7B26;&#x5408;&#x8981;&#x6C42;</li>
</ul>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/*border&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x8FB9;&#x6846;&#xFF0C;&#x9700;&#x8981;&#x5199;&#x4E09;&#x4E2A;&#x503C;&#xFF0C;&#x7B2C;&#x4E00;&#x4E2A;&#x662F;&#x7C97;&#x7EC6;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x662F;&#x7C7B;&#x578B;(solid,dotted,dashed)&#xFF0C;&#x7B2C;&#x4E09;&#x4E2A;&#x662F;&#x989C;&#x8272;*/</span>
    <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#333</span><span class="token punctuation">;</span>
    <span class="token comment">/* border-top:none;
    border:none;
    border-bottom: 1px dashed #888; */</span>

    <span class="token comment">/*width&#x8868;&#x793A;&#x5BBD;&#xFF0C;height&#x8868;&#x793A;&#x9AD8;*/</span>
    <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  &#x6211;&#x662F;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  &#x6211;&#x8FD8;&#x662F;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><ul>
<li>id&#x9009;&#x62E9;&#x5668;</li>
</ul>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/*&#x4E3A;&#x7F51;&#x9875;&#x4E2D;id&#x4E3A;d1&#x7684;&#x6807;&#x7B7E;&#x5199;&#x6837;&#x5F0F;&#xFF0C;&#x539F;&#x5219;&#x4E0A;id&#x4E0D;&#x80FD;&#x91CD;&#x590D;
    id&#x9009;&#x62E9;&#x5668;&#x5728;&#x6807;&#x7B7E;&#x9009;&#x62E9;&#x5668;&#x4E4B;&#x540E;&#x52A0;&#x8F7D;
  */</span>
  <span class="token selector"><span class="token id">#d1</span></span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode color">#f00</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;d1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;d2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</pre><ul>
<li>&#x7C7B;&#x9009;&#x62E9;&#x5668;</li>
</ul>
<p>&#x53EA;&#x8981;&#x5728;&#x6807;&#x7B7E;&#x4E2D;&#x901A;&#x8FC7;class&#x8BBE;&#x7F6E;&#x4E86;&#x503C;&#x4E4B;&#x540E;&#xFF0C;&#x5728;&#x6837;&#x5F0F;&#x4E2D;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;<code>&#x6807;&#x7B7E;&#x540D;&#x79F0;.class&#x7684;&#x503C;</code>&#x8FDB;&#x884C;&#x9009;&#x62E9;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/*&#x8868;&#x793A;&#x4E3A;&#x6240;&#x6709;&#x7684;class&#x4E3A;l1&#x7684;li&#x6807;&#x7B7E;&#x5199;&#x6837;&#x5F0F;*/</span>
  <span class="token selector">li<span class="token class">.l1</span></span> <span class="token punctuation">{</span>
    <span class="token property">list-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">22</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x4E00;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre><ul>
<li>&#x661F;&#x53F7;&#x9009;&#x62E9;&#x5668;<br>
&#x7F51;&#x9875;&#x4E2D;&#x6240;&#x6709;&#x6807;&#x7B7E;&#x90FD;&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;&#xFF0C;&#x8FD9;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x7684;&#x4F18;&#x5148;&#x7EA7;&#x6700;&#x4F4E;&#xFF0C;&#x5B83;&#x662F;&#x6700;&#x5148;&#x52A0;&#x8F7D;&#xFF0C;&#x53EA;&#x8981;&#x662F;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x53EF;&#x4EE5;&#x8986;&#x76D6;</li>
</ul>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/*&#x8868;&#x793A;&#x6240;&#x6709;&#x6807;&#x7B7E;&#x90FD;&#x6EE1;&#x8DB3;&#x6761;&#x4EF6;&#xFF0C;&#x6700;&#x5148;&#x52A0;&#x8F7D;*/</span>
<span class="token selector">*</span><span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><ul>
<li>&#x5B50;&#x7C7B;&#x9009;&#x62E9;&#x5668;<br>
&#x53EF;&#x4EE5;&#x4E3A;&#x67D0;&#x4E2A;&#x6807;&#x7B7E;&#x4E2D;&#x7684;&#x6240;&#x6709;&#x5B50;&#x7C7B;&#x8FDB;&#x884C;&#x6837;&#x5F0F;&#x63A7;&#x5236;&#x4F7F;&#x7528;<code>&#x7A7A;&#x683C;</code>&#x8FDB;&#x884C;&#x5206;&#x5272;</li>
</ul>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token comment">/*&#x5B50;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x8868;&#x793A;&#x6240;&#x6709;&#x7684;id&#x4E3A;u1&#x7684;&#x6807;&#x7B7E;&#x4E2D;&#x7684;&#x6240;&#x6709;li
  &#x5B50;&#x7C7B;&#x7684;&#x8303;&#x56F4;&#x662F;&#x6240;&#x6709;&#x5B50;&#x7C7B;&#xFF0C;&#x4E0D;&#x7BA1;&#x6709;&#x591A;&#x5C11;&#x7EA7;
*/</span>
<span class="token selector"><span class="token id">#u1</span> li</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">14</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#u1</span> span</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li<span class="token class">.l2</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">55</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>u1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x7B2C;&#x4E8C;&#x7EC4;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x9664;&#x4E86;&#x4F7F;&#x7528;&#x7A7A;&#x683C;&#x7684;&#x591A;&#x7EA7;&#x5B50;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x5916;&#xFF0C;&#x4F7F;&#x7528;<code>&gt;</code>&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x5355;&#x7EA7;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token comment">/*&#x52A0;&gt;&#x7B26;&#x53F7;&#x8868;&#x793A;&#x4EC5;&#x4EC5;&#x9002;&#x7528;&#x4E8E;&#x7B2C;&#x4E00;&#x7EA7;&#x7684;&#x7236;&#x7C7B;*/</span>
  <span class="token selector"><span class="token id">#u1</span> <span class="token combinator">&gt;</span> span</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span><span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>u1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x7B2C;&#x4E8C;&#x7EC4;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x8FD9;&#x662F;&#x7B2C;&#x4E8C;&#x7EC4;&#x5217;&#x8868;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre><ul>
<li>&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;<br>
&#x4F7F;&#x7528;:&#x6765;&#x8FDB;&#x884C;&#x8BBE;&#x7F6E;&#xFF0C;&#x5E38;&#x7528;&#x7684;&#x6709;
<ul>
<li><code>:link</code> -&gt;&#x9488;&#x5BF9;&#x8D85;&#x94FE;&#x63A5;&#xFF0C;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x7684;&#x6837;&#x5F0F;</li>
<li><code>:visited</code> -&gt;&#x9488;&#x5BF9;&#x8D85;&#x94FE;&#x63A5;&#xFF0C;&#x94FE;&#x63A5;&#x70B9;&#x51FB;&#x4E4B;&#x540E;&#x7684;&#x6837;&#x5F0F;</li>
<li><code>:hover</code> -&gt;&#x65B0;&#x7248;&#x672C;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x90FD;&#x652F;&#x6301;&#xFF0C;&#x9488;&#x5BF9;&#x6240;&#x6709;&#x6807;&#x7B7E;&#xFF0C;&#x5F53;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#x4E0A;&#x53BB;&#x65F6;&#x7684;&#x6837;&#x5F0F;</li>
<li><code>:nth-child()</code> -&gt;css3.0&#x624D;&#x6709;&#x7684;&#x6837;&#x5F0F;&#xFF0C;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x7279;&#x5B9A;&#x5B50;&#x7C7B;</li>
</ul>
</li>
</ul>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/*&#x4E24;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x540C;&#x65F6;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x6837;&#x5F0F;*/</span>
<span class="token selector">a<span class="token class">.test</span><span class="token pseudo-class">:link</span><span class="token punctuation">,</span>a<span class="token class">.test</span><span class="token pseudo-class">:visited</span></span> <span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode color">#511</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">15</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*a.test:visited {
  color:#b55;
}*/</span>
<span class="token selector">a<span class="token class">.test</span><span class="token pseudo-class">:hover</span></span> <span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode color">#393</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*&#x6240;&#x6709;id&#x4E3A;u1&#x4E2D;&#x7684;li&#x7684;&#x5076;&#x6570;&#x884C;*/</span>
<span class="token selector"><span class="token id">#u1</span> li<span class="token pseudo-class">:nth-child</span><span class="token punctuation">(</span><span class="token n-th">even</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#bbb</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*li&#x5728;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#x4E0A;&#x53BB;&#x65F6;&#x7684;&#x6837;&#x5F0F;*/</span>
<span class="token selector"><span class="token id">#u1</span> li<span class="token pseudo-class">:hover</span></span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#f00</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode color">#fff</span><span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><h3 class="mume-header" id="%E4%B8%89-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B">&#x4E09;&#x3001;&#x76D2;&#x5B50;&#x6A21;&#x578B;</h3>

<p>&#x753B;&#x56FE;&#x8BB2;&#x89E3;</p>
<p>&#x8BBE;&#x7F6E;&#x7684;&#x65B9;&#x5F0F;&#x5982;&#x4E0B;&#x4EE3;&#x7801;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token id">#parent</span></span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#child</span></span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">green</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token comment">/*&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;&#x90FD;&#x662F;10px*/</span>
  <span class="token comment">/* padding:10px; */</span>
  <span class="token comment">/*&#x4E0A;&#x4E0B;20px&#xFF0C;&#x5DE6;&#x53F3;50px*/</span>
  <span class="token comment">/* padding:20px 50px; */</span>
  <span class="token comment">/*&#x4E0A;&#x5DE6;&#x4E0B;&#x53F3;*/</span>
  <span class="token property">padding</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#parent</span></span> <span class="token punctuation">{</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><p>&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;padding&#x6216;&#x8005;margin&#x6765;&#x8BBE;&#x7F6E;&#x6587;&#x672C;&#x5C45;&#x4E2D;&#xFF0C;&#x5982;&#x679C;&#x53EA;&#x662F;&#x60F3;&#x7B80;&#x5355;&#x7684;&#x5B9E;&#x73B0;&#x6587;&#x672C;&#x5C45;&#x4E2D;&#xFF0C;&#x4E0D;&#x8981;&#x8BBE;&#x7F6E;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x548C;&#x9AD8;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x76D2;&#x5B50;&#x6A21;&#x578B;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector"><span class="token id">#parent</span></span> <span class="token punctuation">{</span>
      <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token id">#child</span></span> <span class="token punctuation">{</span>
      <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">green</span><span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token comment">/*&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;&#x90FD;&#x662F;10px*/</span>
      <span class="token comment">/* padding:10px; */</span>
      <span class="token comment">/*&#x4E0A;&#x4E0B;20px&#xFF0C;&#x5DE6;&#x53F3;50px*/</span>
      <span class="token comment">/* padding:20px 50px; */</span>
      <span class="token comment">/*&#x4E0A;&#x5DE6;&#x4E0B;&#x53F3;*/</span>
      <span class="token property">padding</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span> <span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token id">#parent</span></span> <span class="token punctuation">{</span>
      <span class="token property">padding-top</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*&#x5982;&#x679C;&#x4E0D;&#x8BBE;&#x7F6E;&#x5BBD;&#x548C;&#x9AD8;&#xFF0C;&#x76F4;&#x63A5;&#x8BBE;&#x7F6E;padding&#xFF0C;&#x6587;&#x672C;&#x4F1A;&#x5728;padding&#x8BBE;&#x7F6E;&#x7684;&#x4F4D;&#x7F6E;*/</span>
    <span class="token selector">span<span class="token class">.s1</span></span> <span class="token punctuation">{</span>
      <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span><span class="token number">10</span><span class="token unit">px</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token id">#d3</span></span> <span class="token punctuation">{</span>
      <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">150</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span><span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
      <span class="token comment">/* padding-top:25px;padding&#x7684;&#x9AD8;&#x5EA6;&#x662F;&#x4E0D;&#x4F1A;&#x8BA1;&#x7B97;&#x5728;height&#x91CC;&#x9762;&#x7684;&#xFF0C;&#x4E5F;&#x5C31;&#x610F;&#x5473;&#x7740;&#xFF0C;&#x603B;&#x9AD8;&#x5EA6;&#x662F;height+padding
         &#x5982;&#x6B64;&#x5C31;&#x4F1A;&#x5BFC;&#x81F4;&#x5BB9;&#x5668;&#x7684;&#x603B;&#x9AD8;&#x5EA6;&#x53D8;&#x9AD8;&#x3002;&#x6240;&#x4EE5;&#x6CA1;&#x6709;&#x529E;&#x6CD5;&#x4F7F;&#x7528;padding&#x6765;&#x8FDB;&#x884C;&#x6587;&#x672C;&#x7684;&#x5BF9;&#x9F50;
      */</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    &#x6211;&#x7684;&#x5BFC;&#x822A;
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="%E5%9B%9B-%E5%AE%9A%E4%BD%8D">&#x56DB;&#x3001;&#x5B9A;&#x4F4D;</h3>

<p>&#x5728;css&#x4E2D;&#x4F7F;&#x7528;top,left,right,bottom&#x6765;&#x7CBE;&#x786E;&#x8BBE;&#x5B9A;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x662F;&#x4E0D;&#x884C;&#xFF0C;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x8BBE;&#x5B9A;position&#x6765;&#x6539;&#x53D8;&#x5177;&#x4F53;&#x7684;&#x5B9A;&#x4F4D;&#x65B9;&#x5F0F;&#xFF0C;position&#x6709;&#x5982;&#x4E0B;&#x4E00;&#x4E9B;&#x503C;</p>
<ul>
<li>static<br>
&#x8868;&#x793A;&#x9759;&#x6001;&#x7684;&#xFF0C;&#x4E5F;&#x662F;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#xFF0C;&#x8FD9;&#x79CD;&#x5B9A;&#x4F4D;&#x7C7B;&#x578B;&#x4E0D;&#x5141;&#x8BB8;&#x8BBE;&#x7F6E;top&#x8FD9;&#x4E9B;&#x503C;&#x3002;</li>
<li>relative<br>
&#x8868;&#x793A;&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E86;relatvie&#xFF0C;&#x4F1A;&#x76F8;&#x5BF9;&#x4E8E;&#x81EA;&#x5DF1;&#x7684;&#x7236;&#x7C7B;&#x8FDB;&#x884C;&#x4F4D;&#x7F6E;&#x8BBE;&#x7F6E;</li>
</ul>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token id">#child</span></span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">green</span><span class="token punctuation">;</span>
  <span class="token comment">/*&#x76F8;&#x5BF9;&#x4E8E;parent&#x8BBE;&#x7F6E;&#x4F4D;&#x7F6E;*/</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span><span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><ul>
<li>
<p>absolute<br>
&#x8868;&#x793A;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E86;absoulte&#x4E4B;&#x540E;&#xFF0C;&#x4F1A;&#x53BB;&#x627E;&#x4E0A;&#x4E00;&#x7EA7;&#x8BBE;&#x7F6E;&#x4E86;position&#x4E3A;&#xFF08;absoulte&#x6216;&#x8005;relatvie&#xFF09;&#x7684;&#x7236;&#x8282;&#x70B9;&#x8FDB;&#x884C;&#x5B9A;&#x4F4D;</p>
</li>
<li>
<p>fixed<br>
&#x56FA;&#x5B9A;&#x5728;&#x67D0;&#x4E2A;&#x4F4D;&#x7F6E;</p>
</li>
</ul>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/*&#x56FA;&#x5B9A;&#x5728;&#x9876;&#x90E8;*/</span>
<span class="token selector"><span class="token id">#top</span></span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> 
  <span class="token property">top</span><span class="token punctuation">:</span><span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#right</span></span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span><span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span><span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#bottom</span></span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span><span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span>
</pre><p>&#x5728;&#x6709;&#x4E2A;&#x5B9A;&#x4F4D;&#x7684;&#x77E5;&#x8BC6;&#x4E4B;&#x540E;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x5B8C;&#x6210;&#x6587;&#x672C;&#x7CBE;&#x786E;&#x5B9A;&#x4F4D;&#x4E86;&#xFF0C;&#x5982;&#x679C;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;&#x8BBE;&#x7F6E;&#x4E86;&#x5BBD;&#x548C;&#x9AD8;&#xFF0C;&#x6B64;&#x65F6;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;padding&#x548C;margin&#xFF0C;&#x9700;&#x8981;&#x4E3A;&#x6587;&#x672C;&#x589E;&#x52A0;&#x4E00;&#x4E2A;span&#x6807;&#x7B7E;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x6D4B;&#x8BD5;&#x5B9A;&#x4F4D;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x4E4B;&#x540E;&#x4E3A;span&#x6807;&#x7B7E;&#x7F16;&#x5199;&#x76F8;&#x5E94;&#x7684;&#x5B9A;&#x4F4D;&#x6837;&#x5F0F;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">div<span class="token class">.nav</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*&#x5BB9;&#x5668;&#x4E2D;&#x7684;&#x5B50;&#x5BB9;&#x5668;&#x5C45;&#x4E2D;*/</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div<span class="token class">.nav</span> span</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token comment">/* left:10px; */</span>
  <span class="token property">top</span><span class="token punctuation">:</span><span class="token number">12</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><h3 class="mume-header" id="%E4%BA%94-float">&#x4E94;&#x3001;float</h3>

<p>float&#x53EF;&#x4EE5;&#x5C06;&#x5360;&#x6EE1;&#x4E00;&#x884C;&#x7684;&#x5BB9;&#x5668;&#x5411;&#x67D0;&#x4E2A;&#x65B9;&#x5411;&#x6392;&#x5217;&#xFF0C;&#x5982;&#x679C;&#x4F7F;&#x7528;<code>float:left</code>&#x5C31;&#x4F1A;&#x5411;&#x5DE6;&#x6392;&#x5217;&#xFF0C;&#x4F7F;&#x7528;float&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x51E0;&#x4E2A;&#x70B9;</p>
<ul>
<li>&#x4F7F;&#x7528;&#x4E86;float&#x4E4B;&#x540E;&#x4E0D;&#x4F1A;&#x518D;&#x5360;&#x7528;&#x7A7A;&#x95F4;<br>
&#x4F7F;&#x7528;&#x4E86;float&#x4E4B;&#x540E;&#xFF0C;&#x5B50;&#x5BB9;&#x5668;&#x4E0D;&#x4F1A;&#x5360;&#x6709;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x7A7A;&#x95F4;&#xFF0C;&#x6B64;&#x65F6;&#x7236;&#x5BB9;&#x5668;&#x5C31;&#x6CA1;&#x6709;&#x9AD8;&#x5EA6;&#xFF0C;&#x9700;&#x8981;&#x5728;&#x5B50;&#x5BB9;&#x5668;&#x7684;&#x6700;&#x540E;&#x589E;&#x52A0;clear&#xFF0C;&#x6E05;&#x9664;&#x4E24;&#x8FB9;&#x7684;&#x6F02;&#x79FB;<br>
&#x6B64;&#x65F6;&#x9700;&#x8981;&#x7279;&#x522B;&#x6CE8;&#x610F;&#xFF0C;&#x5982;&#x679C;&#x4F7F;&#x7528;&#x7684;&#x662F;&#x5B50;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#xFF0C;&#x7531;&#x4E8E;&#x52A0;&#x8F7D;&#x6BD4;&#x8F83;&#x6162;&#xFF0C;clear&#x4E0D;&#x4F1A;&#x8D77;&#x4F5C;&#x7528;&#xFF0C;&#x6240;&#x6709;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x6765;&#x5904;&#x7406;</li>
</ul>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav_li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x822A;&#x4FE1;&#x606F;1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav_li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x822A;&#x4FE1;&#x606F;2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav_li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x822A;&#x4FE1;&#x606F;3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav_li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x822A;&#x4FE1;&#x606F;4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav_li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x822A;&#x4FE1;&#x606F;5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre><pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">*<span class="token class">.clear</span></span> <span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#nav</span></span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li<span class="token class">.nav_li</span></span><span class="token punctuation">{</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#aaa</span><span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span><span class="token number">10</span><span class="token unit">px</span> <span class="token number">25</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><ul>
<li>&#x5982;&#x679C;float&#x7684;&#x5BB9;&#x5668;&#x603B;&#x5BBD;&#x5EA6;&#x5C0F;&#x4E8E;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x6362;&#x884C;<br>
float&#x7684;&#x6240;&#x6709;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x5EA6;&#x5982;&#x679C;&#x5C0F;&#x4E8E;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x603B;&#x5BBD;&#x5EA6;&#x4F1A;&#x6362;&#x884C;&#xFF0C;&#x9700;&#x8981;&#x7279;&#x522B;&#x6CE8;&#x610F;&#xFF0C;&#x8FB9;&#x6846;&#xFF0C;padding&#xFF0C;margin&#x90FD;&#x4F1A;&#x52A0;&#x8F7D;&#x5B50;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x5EA6;&#x4E2D;&#xFF0C;&#x5EFA;&#x8BAE;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x5EA6;&#x7A0D;&#x5FAE;&#x5BBD;&#x4E00;&#x4E9B;&#xFF08;&#x5B50;&#x5BB9;&#x5668;&#x7684;&#x5BBD;&#x5EA6;&#x7A0D;&#x5FAE;&#x7A84;&#x4E00;&#x4E9B;&#xFF09;</li>
</ul>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>